/**
 * create by young (young2f@outlook.com) on 2020/9/12
 */


'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {Button, Form, Input, Select, DatePicker, Table, Tabs} from 'antd';

import styles from '../index.less';
import FormBase from '../../components/Base/FormBase';
import moment from 'moment';
import 'moment/locale/zh-cn';
import ViewTitle from "../../components/ViewTitle";
import {FormField, SearchForm} from "antd-extra";
import TabsInboundLots from "./tabs/TabsInboundLots";
import MaterialElement from "../finance/modal/MaterialElement";
import ElementItem from "../../components/ElementItem";
import TabsUsedLots from "./tabs/TabsUsedLots";

const {RangePicker} = DatePicker;
moment.locale('zh-cn');

const _ = require('lodash');
const {Option} = Select;
const table = 'SalesOrder';
const title = '订单';

@Form.create()
@connect(({
            user,
            global,
            customer,
            sales,
            dict,
            material,
            store
          }) => ({...user, ...global, ...dict, ...material, ...customer, ...sales, ...store}))
export default class Lots extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const payload = this.props.form.getFieldsValue();
    _.map(payload, (value, key) => {
      if (value === '') {
        payload[key] = undefined;
      }
    });

    this.props.dispatch({
      type: 'store/findOutboundLots',
      payload: {}
    });
  }

  columns() {
    return [
      {
        title: '商品名称', dataIndex: 'name', key: 'name', render: (value, record) => {
          const {prodCode, prodName} = record;
          return <MaterialElement code={prodCode} name={prodName}></MaterialElement>;
        }
      },
      {
        title: '销售信息', dataIndex: 'salesOrderCode', key: 'salesOrderCode', render: (value, record) => {
          const {salesOrderCode, customer} = record;
          const data = [{key: '客户', value: customer}, {key: '订单编号', value: salesOrderCode}];
          return <ElementItem data={data}></ElementItem>;
        }
      },
      {
        title: '发货信息', dataIndex: 'salesOrderCode', key: 'salesOrderCode', render: (value, record) => {
          const {shippingMan, deliverWay, shippingFee} = record;
          const data = [{key: '承运人', value: shippingMan}, {
            key: '运费',
            value: shippingFee
          }];
          return <ElementItem data={data}></ElementItem>;
        }
      },
      {title: '发货方式', dataIndex: 'deliverWay', key: 'deliverWay'},
      {title: '单价', dataIndex: 'price', key: 'price'},
      {title: '发货数量', dataIndex: 'outboundCount', key: 'outboundCount'},
      {title: '销售公司', dataIndex: 'division', key: 'division'},
      {
        title: '出货日期', dataIndex: 'createdTs', key: 'createdTs',  render: value => {
          return <div>{moment(value).format('YYYY-MM-DD')}</div>;
        }
      }
    ];
  }


  render() {
    const {form, outboundLots = []} = this.props;
    console.log('outboundLots', outboundLots);
    return <Form className={styles.content}>
      <Tabs defaultActiveKey={'1'}>
        <Tabs.TabPane key="1" tab={'入库批次'}>
          <TabsInboundLots></TabsInboundLots>
        </Tabs.TabPane>
        <Tabs.TabPane key="2" tab={'出库批次'}>
          <ViewTitle
            title={`出库批次列表`}
            level={1}
          ></ViewTitle>
          <SearchForm
            style={{marginLeft: '6px', marginRight: '6px'}}
            onSearch={() => {
              this.state.current = 1;
              this.componentDidMount();
            }}
            onReset={this.handleReset}
            cols={4}
            min={8}
            expandText="展开"
            form={form}
          >
            {[
              <FormField
                label={`创建时间`}
                name="createdTs"
                key={3}
                initialValue={[this.getSearchStart1Months(), this.getDefaultSearchEndDate()]}
              >
                <RangePicker allowClear={true}
                  // style={{ width: '150%' }}
                />
              </FormField>
            ]}
          </SearchForm>
          <Table
            className={styles.antTable}
            bordered={true}
            columns={this.columns()}
            dataSource={outboundLots}
            scroll={{x: true}}
            pagination={{
              current: this.state.current,
              total: this.state.total,
              showSizeChanger: true,
              onChange: page => {
                this.state.current = page;
                this.componentDidMount();
              },
              onShowSizeChange: (current, pageSize) => {
                this.state.current = 1;
                this.state.pageSize = pageSize;
                this.componentDidMount();
              }
            }}
          ></Table>
        </Tabs.TabPane>
        <Tabs.TabPane key="3" tab={'物料占用'}>
          <TabsUsedLots></TabsUsedLots>
        </Tabs.TabPane>
      </Tabs>
    </Form>;
  }
}
